<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="filter_area">
        <label class="mr_15 mt_15">状态</label>
        <el-select v-model="params.status" size="medium" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table @selection-change="SelectHadnle" :data="list" element-loading-text fit highlight-current-row class="main-loading">
        <el-table-column prop="title" label="商品">
          <template slot-scope="scope">
            <div class="pro">
              <div class="img"><vimage style="width: 80px; height: 80px" :src="scope.row.commodity.master" fit="fit"></vimage></div>
              <div class="txt">
                <div class="name">{{ scope.row.commodity.name }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="拼团类型">
          <template slot-scope="scope">
            <span>{{ scope.row.groupCommodity.type == 1 ? '普通拼团' : '阶梯拼团' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="开团时间"></el-table-column>
        <el-table-column prop="create_time" label="开团进度">
          <template slot-scope="scope">
            <span>{{ scope.row.num + 1 }}/{{ scope.row.success_num + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status | statustxt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="EditHandle(scope.row.id)">查看</el-button>
            <el-button v-has v-if="scope.row.status == 1" type="text" @click="complete(scope.row.id)">手动成团</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer">
        <!--  <el-button size="medium">批量删除
        </el-button>-->
        <el-pagination
          @current-change="ChangeCurrent"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="size"
          :page-count="page"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
    <!-- <el-drawer class="w_80" title="编辑管理员" :visible.sync="drawer" :direction="direction">
      <edituser @on-close="beClose" :uid='user_id' :user_type="user_type"></edituser>
    </el-drawer>-->
  </el-container>
</template>

<script>
import {mapGetters} from 'vuex';
import {getcollagelist, completegroup} from '@/api/mall/groupon';
import DatePicker from '@/components/DatePicker/index';
import {fitter_keyword} from '@/utils/index';
export default {
  data() {
    return {
      params: {
        status: ''
      },
      paramsdf: {},
      page: 1,
      size: 10,
      total: 0,
      listLoading: true,
      list: [],
      drawer: false,
      direction: 'rtl',
      user_id: '',
      user_type: 'add',
      selectionData: [],
      url: '',
      status: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '待成团'
        },
        {
          value: '2',
          label: '已完成'
        },
        {
          value: '11',
          label: '已关闭'
        }
      ]
    };
  },
  components: {
    DatePicker
  },
  computed: {
    ...mapGetters(['allroleslist'])
  },
  mounted() {
    this.getlist();
  },
  filters: {
    statustxt(status) {
      switch (status) {
        case 1:
          return '待成团';
          break;
        case 2:
          return '已完成';
          break;
        case 11:
          return '已关闭';
          break;
      }
    }
  },
  methods: {
    complete(id) {
      this.$confirm('是否手动成团？')
        .then(_ => {
          let o = {};
          o.id = id;

          this.isLoading = true;
          completegroup(o).then(res => {
            this.isLoading = false;
            this.getlist();
          });
        })
        .catch({
          //empty
        });
    },
    doCopy(data) {
      this.$copyText(data).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
          // data.visible = false;
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },
    search() {
      this.paramsdf = fitter_keyword(this.params);
      this.getlist();
    },
    //启用，禁用
    EnableHandle(id) {
      let _this = this;
      this.$confirm('确认停止当前活动？')
        .then(_ => {
          let params = {id: id};
          stopgroup(params).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //选择
    SelectHadnle(selection) {
      this.selectionData = selection;
    },
    //删除
    handleClose(id) {
      let _this = this;
      this.$confirm('确认删除？')
        .then(_ => {
          let data = {
            id: id
          };
          delgroup(data).then(res => {
            _this.getlist();
          });
        })
        .catch(_ => {});
    },
    //编辑
    EditHandle(id) {
      this.$router.push({path: '/groupon/detail', query: {id: id}});
    },
    //编辑完成
    beClose() {
      (this.drawer = false), this.getlist();
    },
    //获取列表
    getlist() {
      this.listLoading = true;
      let data = {
        page: this.page,
        size: this.size
      };
      if (this.paramsdf.status) {
        data.search = {
          status: this.paramsdf.status
        };
      }

      getcollagelist(data).then(res => {
        var jsondata = res.msg;
        this.list = jsondata.data;
        this.total = jsondata.total;
        // this.list = response.data.items
        this.listLoading = false;
      });
    },
    //获取时间
    gettime(value) {
      this.params.begin_date = value[0];
      this.params.end_date = value[1];
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.getlist();
    }
  }
};
</script>

<style lang="scss" scoped>
.login_url {
  padding: 8px 16px;
  background-color: #f4f4f5;
  color: #909399;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 14px;
  p {
    margin: 0;
    margin-right: 10px;
  }
  .el-button {
    padding: 0;
  }
}
.pro {
  display: flex;

  .img {
    width: 80px;
    margin-right: 10px;
  }

  .txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    .name {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
